<template>
  <el-main class="layout-main">
    <el-card class="device-report-manage-card">
      <h2>设备报修处理</h2>
      <div class="table-container">
        <el-table
            :data="pageData"
            stripe
            style="width: 100%;"
        >
          <el-table-column prop="id" label="#" min-width="50" />
          <el-table-column prop="room" label="会议室" min-width="100" />
          <el-table-column prop="device" label="设备名称" min-width="120" />
          <el-table-column prop="applicant" label="报修人" min-width="100" />
          <el-table-column prop="date" label="申请日期" min-width="160" />
          <el-table-column prop="status" label="状态" min-width="100">
            <template #default="{ row }">
              <el-tag :type="statusTag[row.status]">{{ row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="150">
            <template #default="{ row }">
              <el-button
                  v-if="row.status === '未处理'"
                  type="primary"
                  size="small"
                  @click="markReported(row)"
              >上报</el-button>
              <el-button size="small" @click="viewDetail(row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination
          background
          style="margin-top: 16px; text-align: right; width: 100%;"
          :page-size="pageSize"
          :current-page.sync="currentPage"
          :total="allReports.length"
          @current-change="onPageChange"
      />

      <el-dialog
          v-model="dialogVisible"
          title="报修详情"
          width="500px"
      >
        <el-descriptions border column="1">
          <el-descriptions-item label="#">{{ detail.id }}</el-descriptions-item>
          <el-descriptions-item label="会议室">{{ detail.room }}</el-descriptions-item>
          <el-descriptions-item label="设备名称">{{ detail.device }}</el-descriptions-item>
          <el-descriptions-item label="报修人">{{ detail.applicant }}</el-descriptions-item>
          <el-descriptions-item label="描述">{{ detail.description }}</el-descriptions-item>
          <el-descriptions-item label="申请日期">{{ detail.date }}</el-descriptions-item>
          <el-descriptions-item label="当前状态">
            <el-tag :type="statusTag[detail.status]">{{ detail.status }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <template #footer>
          <el-button @click="dialogVisible = false">关闭</el-button>
        </template>
      </el-dialog>
    </el-card>
  </el-main>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';

interface ReportItem {
  id: number;
  room: string;
  device: string;
  applicant: string;
  date: string;
  description: string;
  status: '未处理' | '已上报';
}

const names = ['张三','李四','王五','赵六','孙七','周八','吴九','郑十','冯十一','陈十二'];
const rooms = Array.from({length: 30}, (_, i) => {
  const buildingIndex = i % 7;
  const building = String.fromCharCode(65 + buildingIndex); // A-G
  const floor = Math.floor(i / 7) + 1;
  const roomNum = 100 + (i % 20);
  return `${building}区${building}${floor}号楼${roomNum}`;
});
const devices = [
  '投影仪','电视','麦克风','音响','白板',
  '视频会议设备','录音设备','激光笔','显示屏','无线分享器'
];

function randomDate2025() {
  const start = new Date(2025, 0, 1).getTime();
  const end = new Date(2025, 11, 31, 23, 59, 59).getTime();
  const t = start + Math.random() * (end - start);
  const d = new Date(t);
  return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}:${String(d.getSeconds()).padStart(2,'0')}`;
}

const allReports = ref<ReportItem[]>([]);
for (let i = 1; i <= 30; i++) {
  allReports.value.push({
    id: i,
    room: rooms[Math.floor(Math.random()*rooms.length)],
    device: devices[Math.floor(Math.random()*devices.length)],
    applicant: names[Math.floor(Math.random()*names.length)],
    date: randomDate2025(),
    description: `故障描述 ${i}，请及时处理。`,
    status: Math.random() < 0.5 ? '未处理' : '已上报'
  });
}

const currentPage = ref(1);
const pageSize = ref(10);
const dialogVisible = ref(false);
const detail = ref<ReportItem>({} as ReportItem);

const pageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return allReports.value.slice(start, start + pageSize.value);
});

const statusTag: Record<ReportItem['status'], string> = {
  '未处理': 'warning',
  '已上报': 'success'
};

function onPageChange(page: number) { currentPage.value = page; }

function markReported(row: ReportItem) {
  row.status = '已上报';
  ElMessage.success('状态已更新：已上报');
}

function viewDetail(row: ReportItem) {
  detail.value = { ...row };
  dialogVisible.value = true;
}
</script>

<style scoped>
.layout-main {
  padding: 0;
}
.device-report-manage-card {
  padding: 20px;
}
.table-container {
  overflow-x: hidden;
}
</style>
